<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <link rel="stylesheet" href="css_three.css">
</head>
<body>
    <h1>CSS选择器</h1>
    <h2>通用选择器</h2>
    <div id="main">ID选择器</div>
    <p class="news_title">类选择器</p>
    <h3>元素选择器</h3>
    <p data-bind>属性选择器：属性名 data-bind</p>
    <p title="abc">属性选择器：title值为 abc</p>
    <p title="ab de">属性选择器：title 包 含 de</p>
    <p title="xyz-bab">属性选择器：title值以“xyz”开始</p>
    <a href="#">链接</a>
    <a href="#" title >链接2</a>

    <ul>
        <li>背景</li>
        <li>改变</li>
        <li>颜色</li>
    </ul>
    姓名：<input type="text">
    籍贯：<input type="text">
    <div>
        <pre>第一个pre</pre>
        <pre>第二个pre</pre>
    </div>
    <div>
        <h1>伪元素</h1>
        <p>
            第一行 <br>
            第二行<br>
        </p>
    </div>
    <div>
        <span>后代选择器</span>
        <pre>
            <span>后代选择器</span>
        </pre>
    </div>
  <p>
      <span>子选择器</span>
      <pre>
          <span>子选择器</span>
      </pre>
  </p>

  <pre>相邻兄弟选择器</pre><span>相邻兄弟</span><span>普通兄弟</span><span>普通兄弟</span>
  <pre>普通兄弟选择器</pre><br><span class="bor">相邻兄弟</span><br><span class="bor">普通兄弟</span><br><span class="bor">普通兄弟</span><br>
</body>
</html>